// 1. 列表区显示所有物料
// 2. key 对应组件映射关系
import {ElButton, ElInput} from 'element-plus'
import Range from '../components/Range'

function createEditorConfig() {
  const componentList = [] // 物料
  const componentMap = {} // 中间内容区

  return {
    componentList,
    componentMap,
    register: (component) => {
      componentList.push(component)
      componentMap[component.key] = component
    }
  }
}

export let registerConfig = createEditorConfig()

// 工厂函数
const createInputProp = (label) => ({type: 'input', label})
const createaColorProp = (label) => ({type: 'color', label})
const createSelectProp = (label, options) => ({type: 'select', label,options})

registerConfig.register({
  label: '文本',
  preview: () => '预览文本',
  // style 传的是对象
  render: ({props}) => <span style={{color: props.color, fontSize: props.size}}>{props.text || '渲染文本'}</span>,
  key: 'text',
  props: {
    text: createInputProp('文本内容'),
    color: createaColorProp('字体颜色'),
    size: createSelectProp('字体大小', [
      {label: '14px', value: '14px'},
      {label: '20px', value: '20px'},
      {label: '24px', value: '24px'},
    ])
  }
})

registerConfig.register({
  label: '按钮',
  preview: () => <ElButton>预览按钮</ElButton>,
  render: ({props}) => <ElButton type={props.type} size={props.size}>{props.text || '渲染按钮'}</ElButton>,
  key: 'button',
  props: {
    text: createInputProp('按钮内容'),
    type: createSelectProp('按钮类型', [
      {label: '基础', value: 'promary'},
      {label: '成功', value: 'success'},
      {label: '警告', value: 'warning'},
    ]),
    size: createSelectProp('按钮尺寸', [
      {label: '小', value: 'small'},
      {label: '中', value: 'medium'},
      {label: '默认', value: ''},
    ])
  }
})

registerConfig.register({
  label: '输入框',
  preview: () => <ElInput placeholder="预览请输入"></ElInput>,
  render: ({model}) => <ElInput placeholder="渲染请输入" {...model.default}></ElInput>,
  key: 'input',
  model: { // 双向绑定字段  绑定到 default 上
    default: '' // default 中是 modelvalue  和 updateModelvalue 两个值
  }
})

registerConfig.register({
  label: '范围选择器',
  preview: () => <Range placeholder="预览"></Range>,
  render: ({model}) => {
    console.log(model, 33)
    // 绑定函数 加 on
    return <Range {...{
      start: model.start.modelValue,
      'onUpdate:start': model['onUpdate:modelValue'],
      end: model.end.modelValue,
      'onUpdate:end':model['onUodate:modelValue']
    }}></Range>
  },
  model: {
    start: '开始时间',
    end: '结束时间'
  },
  key: 'range'
})

// 动态解析的， 打包时 webpack 动态加载文件？？？？？